<script>
import {defineComponent} from "vue";
import Header from "@/components/Header.vue";
import VideoCard from "@/components/VideoCard.vue";
import BackTop from "@/components/BackTop.vue"
import Footer from "@/components/Footer.vue";
import {Files, Film, Histogram, TrophyBase} from "@element-plus/icons-vue";
import * as echarts from "echarts";
import store from "@/store";


export default defineComponent({
  components: {Histogram, TrophyBase, Files, Film, Footer, VideoCard, Header, BackTop},
  methods: {
    searchVideo() {
      // this.$refs.video_container.searchData();
      this.$router.push({
        path: "/Hot",
        query: {
          keys: store.state.search.key
        }
      })
    },
    loadTable() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('rank'));
      let option = {
        title: {
          text: 'Basic Radar Chart'
        },
        legend: {
          data: ['Allocated Budget', 'Actual Spending']
        },
        radar: {
          // shape: 'circle',
          indicator: [
            {name: 'Sales', max: 6500},
            {name: 'Administration', max: 16000},
            {name: 'Information Technology', max: 30000},
            {name: 'Customer Support', max: 38000},
            {name: 'Development', max: 52000},
            {name: 'Marketing', max: 25000}
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: 'Allocated Budget'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: 'Actual Spending'
              }
            ]
          }
        ]
      }
// 绘制图表
      myChart.setOption(option);
    }
  },
  mounted() {
    this.loadTable();
  },
  data() {
    return {
      categories: ['少儿', '动漫', '真人', '搞笑', '戏剧', '舞蹈', '音乐', '电影', '短剧', '剧情', '综艺', '用户'],
      prefix: "Categories?categories=",
      imgList: [""]
    };
  },
});


</script>

<template>
  <header>
    <Header @custom-event="searchVideo"></Header>
  </header>
  <BackTop></BackTop>
  <!--  <VideoCard ref="video_container"></VideoCard>-->
  <main>
    <div class="home-carousel">
      <el-carousel height="550px" indicator-position="none" motion-blur>
        <el-carousel-item>
          <img src="@/static/el-carousel2.jpg" style="width: 100%; height:100%" alt="1">
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/static/el-carousel1.jpg" style="width: 100%; height:100%" alt="2">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="categorize">
      <el-card>
        <el-icon size="20px">
          <Files/>
        </el-icon>&nbsp;&nbsp;
        <b>分类 Category</b>
        <el-divider></el-divider>
        <div class="categorize-info">
          <el-row :gutter="20">
            <el-col v-for="category in categories" :span="4" :offset="2">
              <div class="video-category">
                <el-icon size="16px">
                  <Film/>
                </el-icon>&nbsp;&nbsp;
                <router-link :to="category"><b>{{ category }}</b></router-link>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <div class="hot-video-container">
      <el-card>
        <el-icon size="20px">
          <Histogram/>
        </el-icon>&nbsp;
        <b>热门 Hot</b>
        <el-divider></el-divider>
        <div class="hot-video">
          <el-row :gutter="50">
            <el-col v-for="category in categories" :span="6">
              <el-card class="video-card">
                <img src="@/static/video1.png" class="video-img" alt="1">
                <p class="description">超级有趣的</p>
                <p class="time">2024-04-09</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <div class="best-user-rank">
      <el-card>
        <el-icon size="20px">
          <TrophyBase/>
        </el-icon>&nbsp;&nbsp;
        <b>最热视频排行榜 BestHot Rank</b>
        <el-divider></el-divider>
        <div id="rank" style="width: 600px;height:400px;">
        </div>
      </el-card>
    </div>
  </main>
  <footer>
    <Footer/>
  </footer>
</template>

<style scoped>
header {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--el-bg-color);
  user-select: none;
}

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

main {
  width: 85%;
  margin-left: 7.5%;
}

.home-carousel {

  position: relative;
  top: 1rem;

}

.categorize {
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.video-category a {
  text-decoration: none;
  color: var(--el-font-family);
}

.video-category a:hover {
  color: #00aeec;
}

.categorize el-card {
  min-height: 600px;
  display: flex;
  align-items: center;
}

.video-category {
  margin-bottom: 1rem;
  align-items: center;
  display: flex;
}

.hot-video-container {
  margin-bottom: 1rem;
}

.hot-video-container el-card {
  min-height: 400px;
  display: flex;
  align-items: center;
}

.best-user-rank {
  margin-bottom: 12rem;
}

.best-user-rank el-card {
  display: flex;
  align-items: center;
}

.video-img {
  width: 100%;
  height: 136px;
  border-radius: 6px 6px 0 0;
}

.video-card {
  margin-bottom: 1rem;
  padding: 0;
}

:deep(.hot-video .el-card__body) {
  padding: 0;
  height: 180px;
}
.description{
  padding-left: 1rem;
  padding-top: 4px;
  font-size: 14px;
  font-weight: bold;
  font-family: "HarmonyOS Sans SC";
}
</style>
